<template>
  <!-- <div class="tree-container">
    <el-button type="primary" @click="onShrinkUnfold">
        {{this.expandAll ? '收缩' : '展开'}}所有节点
    </el-button>

  </div> -->

  <div>
    <el-dialog
      :title="dialogtitle"
      width="800px"
      class="icon-dialog"
      :visible.sync="show"
      :before-close="closeForm"
      append-to-body
      @open="open"
    >
      <el-form ref="form" :size="size" :model="form" :rules="rules" label-width="130px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" prop="title">
              <el-input v-model="form.title" auto-complete="off" clearable placeholder="请输入名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <el-input v-model="form.description" auto-complete="off" clearable placeholder="请输入描述" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="状态" prop="status">
              <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="功能模块">
          <el-radio-group v-model="form.is_allrole">
            <el-radio :label="0">部分模块</el-radio>
            <el-radio :label="1">全部模块</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-row v-show="form.is_allrole==0" >
          <el-form-item>
            <el-button type="primary" @click="onShrinkUnfold">
                {{this.isExpand ? '收缩' : '展开'}}所有节点
            </el-button>
            <!-- <el-button @click="changeTreeNodeNo" >展开节点</el-button>
            <el-button @click="changeTreeNodeOff" >收缩节点</el-button> -->
          </el-form-item>
        </el-row>

        <el-row v-show="form.is_allrole==0">
          <el-col :span="24">
            <el-form-item label="" prop="role_type">
              <el-tree
                ref="menu"
                class="tree-border"
                :data="options"
                show-checkbox
                node-key="id"
                :default-checked-keys="form.access"
                :check-strictly="strictly"
                :default-expand-all="isExpand"
                empty-text="加载中，请稍后"
                :props="defaultProps"
                @check="checkStrictly"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="loading" type="primary" @click="submit">
          <span v-if="!loading">保 存</span>
          <span v-else>提 交 中...</span>
        </el-button>
        <el-button @click="closeForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'platformschemeupdate',
    components: {},
    props: {
      show: { type: Boolean, default: false },
      opentype: { type: String, default: 'add' },
      size: { type: String, default: '' },
      info: { type: Object }
    },
    data() {
      return {
        dialogtitle: '',
      form: {
        status: 1,
        access: [],
        pidarray: []
      },
      options: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      strictly: true,
      loading: false,
      rules: {
        title: [{
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        }]
      },
      isExpand: false,
      expandAll: false,
      dataOptions: []
      };
    },
    watch: {
      show(value) {
        if (value) {
          this.$api.post('/Sysbase/getModules').then(res => {
            this.options = res.menus
          })
        }
      }
    },
    methods: {
      // 节点展开
      async onShrinkUnfold() {
        try {
          await this.$confirm('确认要展开所有节点?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          this.isExpand = !this.isExpand
          // 改变每个节点的状态
          this.changeTreeNodeStatus(this.$refs.menu.store.root)
        } catch (e) {
          this.$message({
            type: 'info',
            message: e === 'cancel' ? '取消操作' : '操作失败'
          })
        }
      },
      // 改变节点的状态
      changeTreeNodeStatus (node) {
        node.expanded = this.isExpand
        for (let i = 0; i < node.childNodes.length; i++) {
          // 改变节点的自身expanded状态
          node.childNodes[i].expanded = this.isExpand
          // 遍历子节点
          if (node.childNodes[i].childNodes.length > 0) {
            this.changeTreeNodeStatus(node.childNodes[i])
          }
        }
      },

      open() {
      this.form = this.info
      this.dialogtitle = '功能模块设置'
      this.setDefaultVal('access')
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.form.access = this.getMenuAllCheckedKeys()

          this.$api.post('/platformscheme/update', this.form).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$emit('refesh_list')
            this.closeForm()
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    getMenuAllCheckedKeys() {
      const checkedKeys = this.$refs.menu.getCheckedKeys()
      const halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys()
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
      return checkedKeys
    },
    setDefaultVal(key) {
      if (this.form[key] == null || this.form[key] == '') {
        this.form[key] = []
      }
    },
    checkStrictly() {
      this.strictly = false
    },
    normalizer(data) {
      if (data.children && !data.children.length) {
        delete data.children
      }
      return {
        id: data.val,
        label: data.key,
        children: data.children
      }
    },
    closeForm() {
      this.$emit('update:show', false)
      this.loading = false
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.strictly = true
    }
    }
  };
</script>